<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <div class="base">
          <img class="cover" :src="course.cover"/>
          <div class="info">
            <div class="t">
              <span class="name">{{course.name}}</span>
              <span class="i">课程教师：{{course.username}}</span>
              <span class="i">课程时间：{{parseTime(course.startTime, '{y}-{m}-{d}')}} - {{parseTime(course.endTime, '{y}-{m}-{d}')}}</span>
            </div>
            <div class="b" v-if="course.uid == 1">
              <el-button type="primary" icon="el-icon-user-solid">成员</el-button>
              <el-button type="success" icon="el-icon-collection-tag">成绩</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="edit"></div>
      </el-col>
    </el-row>
    <div class="tabs">
      <el-tabs type="border-card">
        <el-tab-pane label="课程介绍">
          <div v-if="course.uid == 1">
            <div class="btns">
              <el-button type="primary" @click="handleUpdateIntro">保存</el-button>
            </div>
            <editor v-model="course.intro" :min-height="140"/>
          </div>
          <div v-else v-html="course.intro"></div>
        </el-tab-pane>
        <el-tab-pane label="教学资源">
          <Resource />
        </el-tab-pane>
        <el-tab-pane label="实训训练">实训训练</el-tab-pane>
        <el-tab-pane label="实训作业">实训作业</el-tab-pane>
        <el-tab-pane label="课程考试">课程考试</el-tab-pane>
        <el-tab-pane label="学习交流">学习交流</el-tab-pane>
        <el-tab-pane label="扩展资源">扩展资源</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>

import { listCourse, getCourse, addCourse, updateCourse, delCourse } from "@/api/edu/course";
import { listCourseResource, getCourseResource, addCourseResource, updateCourseResource, delCourseResource } from "@/api/edu/courseResource";
import Resource from './components/resource'
export default {
  name: "CourseType",
  dicts: ['sys_bool_status'],
  components: {
    Resource
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      activeName: "first",
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        type: undefined
      },
      courseId: 1,
      course: {},
      // 表单参数
      form: {
        id: undefined,
        name: undefined,
        type: undefined,
        startTime: undefined,
        endTime: undefined,
        cover: undefined,
        intro: undefined
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.courseId = this.$route.query.courseId;
    this.form.id = this.courseId;
    this.getCourseDetail();
  },
  methods: {

    getCourseDetail(){
       getCourse(this.courseId).then(response => {
        this.course = response.data;
      });
    },
   
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 修改按钮操作 */
    handleUpdateIntro() {
      let data = {
        id: this.courseId,
        intro: this.course.intro
      }
      updateCourse(data).then(response => {
        this.msgSuccess("修改成功");
      });
    }

  }
};
</script>
<style scoped lang="scss">
  .base{
    display: flex;
    .cover{
      height: 170px;
      width: 350px;
    }
    .info{
      display: flex;
      flex-direction: column;
      position: relative;
      padding-left: 30px;
    }
    .info .t{
      display: flex;
      flex-direction: column;
      color: #666;
      .name{
        font-size: 28px;
        color: #000;
      }
      .i{
        padding-top: 10px;
        font-size: 14px;
      }
    }
    .info .b{
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
  .tabs{
    padding-top: 30px;
    .btns{
      text-align: right;
      padding: 10px 0 20px 0;
    }
  }
</style>